<template>
    <div class="talk">
        <button @click="getLoveTalk">获取一句话</button>
        <ul>
            <li v-for="item in list " :key="item.id">
                 {{ item.title }}
            </li>
        </ul>
    </div>
</template>
<script lang="ts" setup>
import {reactive} from 'vue'
import axios from 'axios'
let list = reactive([
    {id:'wzt01',title:'真好看'},
    {id:'wzt02',title:'真可爱'},
    {id:'wzt03',title:'真美丽'}
])
// axios发送请求的方式
// 异步函数
// async function getLoveTalk(){ 
// 发请求
//  let result  = await axios.get('地址')
// }
// function getLoveTalk(){
//     axios,get('地址').then( res=>{
//         list.push(res.data)
//     })
// }
function getLoveTalk(){
    list.push({
        id:'wzt01',
        title:'nice'
    })
}
</script>
<style lang="less" scoped>
      .talk {
        background-color: orange;
        padding: 10px;
        border-radius: 0 0 10px;
        box-shadow: 0 0 10px
    }
    li{
        list-style:none
    }
</style>